import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { store, key } from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
import { createPinia } from 'pinia'
// import { registerMicroApps, start } from 'qiankun'

// 加载全局样式
import './styles/index.scss'

// 组件
import AppPagination from '@/components/Pagination/index.vue' // 分页器
import AppDialogForm from '@/components/DialogForm/index.vue' // 弹窗
import AppCard from '@/components/Card/index.vue' // 卡片(背景)
import AppIcon from '@/components/Icon/index.vue' // 图标

const app = createApp(App)
const pinia = createPinia()

app.use(router)
app.use(store, key)
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale: zhCn, })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(pinia)
app.use(createPinia)

app.component('AppPagination', AppPagination)
app.component('AppDialogForm', AppDialogForm)
app.component('AppCard', AppCard)
app.component('AppIcon', AppIcon)

app.mount('#app')

// 前端微服务
function render(props) {
  const { container } = props;
  app.use(router).mount('#vue')
}
if (!window.__POWERED_BY_QIANKUN__) {
  // 全局变量来判断环境
  render()
}
 
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap () {
  console.log('现在进入子应用c-child的bootstraped阶段')
}
 
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount (props) {
  console.log('现在进入子应用c-child的mount周期', props)
 
  render(props)
}
 
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount () {
  console.log('现在进入子应用c-child的unmount阶段')
}
 
/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update (props) {
  console.log('update props', props)
}
